<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <title>Shop</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //Meta tag Keywords -->
    <!-- Custom-Files -->
    <link rel="icon" th:href="@{/ico/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}">
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="../static/css/style.css" th:href="@{css/style.css}" type="text/css" media="all" />
    <!-- Style-CSS -->
    <!-- font-awesome-icons -->
    <link href="http://at.alicdn.com/t/font_1812647_baid87hyd3d.css" rel="stylesheet">
    <link href="../static/css/font-awesome.css" th:href="@{css/font-awesome.css}"  rel="stylesheet">
    <!-- //font-awesome-icons -->
    <!-- /Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
    <!-- //Fonts -->

</head>
<body>

    <div class="main-sec inner-page">
        <!-- //header -->
        <header th:replace="_fragments :: menu(4) " class="py-sm-3 pt-3 pb-2" id="home">
            <div class="container">
                <!-- nav -->
                <div class="top-w3pvt d-flex">
                    <div id="logo">
                        <h1> <a href="index.html"><span class="log-w3pvt">B</span>aggage</a> <label class="sub-des">Online Store</label></h1>
                    </div>

                    <div class="forms ml-auto">
						<span class="avatar">
							<span>用户名</span>
						</span>
                        <a href="login.html" class="btn"><span class="fa fa-user-circle-o"></span> 登录</a>
                        <a href="register.html" class="btn"><span class="fa fa-pencil-square-o"></span> 注册</a>
                    </div>
                </div>
                <div class="nav-top-wthree">
                    <nav>
                        <label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
                        <input type="checkbox" id="drop" />
                        <ul class="menu">
                            <li><a href="index.html">主页</a></li>
                            <li><a href="about.html">关于我们</a></li>
                            <li>
                                <!-- First Tier Drop Down -->
                                <label for="drop-2" class="toggle">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span>
                                </label>
                                <a href="#">系列 <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                                <input type="checkbox" id="drop-2" />
                                <ul>
                                    <li><a href="about.html" class="drop-text">特色</a></li>
                                    <li><a href="goods.html" class="drop-text">热卖</a></li>

                                </ul>
                            </li>

                            <li class="active"><a href="shop.html">商品</a></li>
                            <li><a href="contact.html">联系我们</a></li>
							<li><a href="shopcar.html">购物车</a></li>
                        </ul>
                    </nav>
                    <!-- //nav -->
                    <div class="search-form ml-auto">
                        <div class="form-w3layouts-grid">
                            <form action="#" method="post" class="newsletter">
                                <input class="search" type="search" placeholder="Search here..." required="">
                                <button class="form-control btn" value=""><span class="fa fa-search"></span></button>
                            </form>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </header>
        <!-- //header -->
        <!-- //header -->
    </div>
    <!-- //banner-->
    <!--/banner-bottom -->
    <section class="banner-bottom py-5">
        <div class="container py-5">
            <h3 class="title-wthree mb-lg-5 mb-4 text-center">商品 列表</h3>
            <!--/row-->
            <div  class="row shop-wthree-info text-center">

                <h3 style="margin: 0 auto;" th:if="${page.getTotalElements()== 0}">没有该商品！</h3>
                <!-- 商品 -->
                <div th:each="goods: ${page.content}"  class="col-lg-3 shop-info-grid text-center mt-4">
                    <div th:if="${goods != null}" class="product-shoe-info shoe">
                        <div class="men-thumb-item">
							<a href="goods.html" th:href="@{/goods(id=${goods.id})}">
								<img src="../static/images/b1.jpg" th:src="${goods.goodsImg}" class="img-fluid" alt="">
							</a>
                            

                        </div>
                        <div class="item-info-product">
                            <h4>
                                <a href="goods.html" th:text="${goods.goodsName}">Messenger Bag </a>
                            </h4>

                            <div class="product_price">
                                <div class="grid-price">
                                    ￥<span class="money"><span th:text="${goods.goodsPrice}">$675.00</span></span>
                                </div>
                            </div>
                            <ul class="stars">
                                <li><a href="#"><span class="fa fa-star" aria-hidden="true"></span></a></li>
                                <li><a href="#"><span class="fa fa-star" aria-hidden="true"></span></a></li>
                                <li><a href="#"><span class="fa fa-star-half-o" aria-hidden="true"></span></a></li>
                                <li><a href="#"><span class="fa fa-star-half-o" aria-hidden="true"></span></a></li>
                                <li><a href="#"><span class="fa fa-star-o" aria-hidden="true"></span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>


            </div>
            <!--//row-->
            <!--/row1-->



            <!--分页按钮-->
            <nav aria-label="Page navigation example mt-5">
                <ul class="pagination" th:if="${page.totalPages>1}">
                    <li class="page-item">
                        <a class="page-link" href="#" th:href="@{/search(page=${page.number-1},goodsName=${goodsName})}" th:unless="${page.first}">上一页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" th:href="@{/search(page=0,goodsName=${goodsName})}">首页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" th:href="@{/search(page=0,goodsName=${goodsName})}">1</a>
                    </li>
                    <li class="page-item" th:if="${page.totalPages>=2}">
                        <a class="page-link" href="#" th:href="@{/search(page=1,goodsName=${goodsName})}">2</a>
                    </li>
                    <li class="page-item" th:if="${page.totalPages>=3}">
                        <a class="page-link" href="#" th:href="@{/search(page=2,goodsName=${goodsName})}">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" th:href="@{/search(page=${page.totalPages-1},goodsName=${goodsName})}">尾页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" th:href="@{/search(page=${page.number+1},goodsName=${goodsName})}" th:unless="${page.last}">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </section>
    <!-- /banner-bottom -->
    <!--/newsletter -->
 <section class="newsletter-w3pvt py-5">
     <div class="container py-md-5">
         <form method="post" action="#">
             <p class="text-center">订阅手袋商店的邮件列表，以获取最新的新品、特别优惠和其他折扣信息。</p>
            <div class="row subscribe-sec">
                 <div class="col-md-9">
                     <input type="email" class="form-control" id="email" placeholder="输入你的邮箱.." name="email" required="">
 
                 </div>
                 <div class="col-md-3">
 
                     <button type="submit" class="btn submit">订阅</button>
                 </div>
 
             </div>
         </form>
     </div>
 </section>
    <!--//newsletter -->
    <!--/shipping-->
 <section class="shipping-wthree">
     <div class="shiopping-grids d-lg-flex">
         <div class="col-lg-4 shiopping-w3pvt-gd text-center">
             <div class="icon-gd"><span class="fa fa-truck" aria-hidden="true"></span>
             </div>
             <div class="icon-gd-info">
                 <h3>免费送货</h3>
                 <p>所有订单超过2000元</p>
             </div>
         </div>
         <div class="col-lg-4 shiopping-w3pvt-gd sec text-center">
             <div class="icon-gd"><span class="fa fa-bullhorn" aria-hidden="true"></span></div>
             <div class="icon-gd-info">
                 <h3>免费返回</h3>
                 <p>30天内第一次兑换</p>
             </div>
         </div>
         <div class="col-lg-4 shiopping-w3pvt-gd text-center">
             <div class="icon-gd"> <span class="fa fa-gift" aria-hidden="true"></span></div>
             <div class="icon-gd-info">
                 <h3>会员折扣</h3>
                 <p>注册,节省29%</p>
             </div>
 
         </div>
     </div>
 
 </section>
    <!--//shipping-->
    <!-- footer -->
    <div th:replace="_fragments ::footer " class="footer_agileinfo_topf py-5">
        <div class="container py-md-5">
            <div class="row">
                <div class="col-lg-3 footer_wthree_gridf mt-lg-5">
                    <h2><a href="index.html"><span>B</span>aggage
                        </a> </h2>
                    <label class="sub-des2">Online Store</label>
                </div>
                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-4">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="index.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Home</a>
                        </li>
                        <li>
                            <a href="about.html"><span class="fa fa-angle-right" aria-hidden="true"></span> About</a>
                        </li>
                        <li>
                            <a href="shop.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Shop</a>
                        </li>
                        <li>
                            <a href="shop.html"><span class="fa fa-angle-right" aria-hidden="true"></span>Collections</a>
                        </li>

                    </ul>
                </div>
                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-sm-4 mt-3">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="goods.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Extra Page</a>
                        </li>

                        <li>
                            <a href="#"><span class="fa fa-angle-right" aria-hidden="true"></span> Terms & Conditions</a>
                        </li>
                        <li>
                            <a href="goods.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Shop Single</a>
                        </li>
                        <li>
                            <a href="contact.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Contact Us</a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-sm-4 mt-3">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="login.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Login </a>
                        </li>

                        <li>
                            <a href="register.html"><span class="fa fa-angle-right" aria-hidden="true"></span>Register</a>
                        </li>
                        <li>
                            <a href="#"><span class="fa fa-angle-right" aria-hidden="true"></span>Privacy & Policy</a>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="w3ls-fsocial-grid">
                <h3 class="sub-w3ls-headf">Follow Us</h3>
                <div class="social-ficons">
                    <ul>
                        <li><a href="#"><span class="fa fa-facebook"></span> Facebook</a></li>
                        <li><a href="#"><span class="fa fa-twitter"></span> Twitter</a></li>
                        <li><a href="#"><span class="fa fa-google"></span>Google</a></li>
                    </ul>
                </div>
            </div>
            <div class="move-top text-center mt-lg-4 mt-3">
                <a href="#home"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
            </div>
        </div>
    </div>
    <!-- //footer -->
    <!-- copyright -->
    <div class="cpy-right text-center py-3">
        <p>Copyright &copy; 2020. 2.2  記憶ミ || 初见ミ</p>
    </div>
    <!-- //copyright -->

</body>

</html>
